<template>
  <div class="main">
    <h1>
      <el-link href="/home" target="_blank">宠物商城</el-link>
    </h1>
    <div class="left">
      <div>
        <p><i class="el-icon-user"></i> {{name}}</p>
        <p><i class="el-icon-tickets"></i> {{nickname}}</p>
        <p><i class="el-icon-mobile-phone"></i> +86 {{phone}}</p>
      </div>
      <div style="margin-top:120px;">
        <ul>
          <li @click="info()"><span>&nbsp;个人信息&nbsp;</span></li>
          <li @click="privacy()"><span>&nbsp;隐私保护&nbsp;</span></li>
          <li @click="changePwd()"><span>&nbsp;修改密码&nbsp;</span></li>
          <li @click="drawer = true"><span style = "color:red;">&nbsp;注销账号&nbsp;</span></li>
          <li @click="exit()"><span style = "color:#8B658B;">&nbsp;退出登录&nbsp;</span></li>
        </ul>
      </div>
    </div>

    <el-drawer title="注销账号" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="300px;">
      <p>注销账号是不可恢复的操作，您应确认好账号的相关数据！</p>
      <p>将会删除与您账号有关的一切数据！</p>
      <p>注销前，请确认与账号相关的服务均已妥善处理！！！</p>
      <br/>
      <el-button type="layout" @click="layout()">确认并注销账号</el-button>
    </el-drawer>

    <div class="right">
      <el-main>
        <router-view name="center"/>
      </el-main>
    </div>
  </div>
</template>

<script>
  import cookie from 'js-cookie'

  const axios = require('axios')
  export default {
    name: "Personal",
    data() {
      return {
        name: '',
        nickname: '',
        phone: '',
        drawer: false,
        direction: 'btt',
        fullscreenLoading: false
      }
    },
    mounted() {
      this.getInfo() // 获取用户名，昵称
    },
    methods: {
      getInfo() {
        const _this = this
        _this.name = cookie.get('loginName')
        axios.get('http://localhost:9000/personal/findByName/' + cookie.get('loginName')).then(function (resp) {
          _this.nickname = resp.data.nickname
          var number = resp.data.phone
          _this.phone = number.substring(0, 3) + '****' + number.substring(7, 11)
        })
      },
      info() {
        this.$router.push('/personal/info')
      },
      changePwd() {
        this.$router.push('/personal/changePwd')
      },
      privacy() {
        this.$router.push('/personal/privacy')
      },
      layout() {  // 注销账号 删除用户，个人中心，购物车，订单
        const _this = this
        axios.get('http://localhost:9000/user/layout/' + cookie.get('loginName')).then(function (resp) {
          /*const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          setTimeout(() => {
            loading.close();
          }, 2000);*/
          _this.$message({
            type: 'success',
            message: '账号已注销!'
          })
          _this.$router.push('/login')
        })
      },
      exit() {
        var date = new Date();
        date.setTime(date.getTime() - 10000);
        var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
        console.log("删除cookies:" + keys);
        if (keys) {
          for (var i = keys.length; i--;)
            document.cookie = keys[i] + "=0; expire=" + date.toGMTString() + "; path=/";
        }
        this.$router.push('/')
      },
      handleClose(done) { // 关闭弹出框
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      }
    }
  }
</script>

<style scoped>

  .el-link {
    font-size: 25px;
  }

  .main {
    width: 100%;
  }

  .left {
    width: 35%;
    display: inline-block;
  }

  .left div p {
    font-size: 18px;
  }

  .right {
    width: 64%;
    display: inline-block;
  }

  ul li {
    list-style-type: none;
    font-size: 20px;
    color: deepskyblue;
    margin: 10px;
    cursor: pointer;
  }

  ul li span {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);  /*浅色投影*/
  }

  .el-button--layout {
    background: red;
    color: #fff;
  }
</style>
